<style scoped>
</style>

<template>

  <div>

    <Modal
      v-model="IsModalShow"
      :title="modalFormTitle"
      :mask-closable="false"
      @on-cancel="cancel"
      width="600"
    >
      <Tabs
        type="card"
        :value="menuType"
        @on-click="onTabClick"
      >
        <TabPane
          label="一级菜单"
          name="menu1"
          :disabled="modalFormTitle=='修改菜单'"
        ></TabPane>
        <TabPane
          label="二级菜单"
          name="menu2"
          :disabled="modalFormTitle=='修改菜单'"
        ></TabPane>
        <TabPane
          label="按钮"
          name="menu3"
          :disabled="modalFormTitle=='修改菜单'"
        ></TabPane>
      </Tabs>
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="80"
        value=true
        style="padding: 5px 30px 5px 5px"
      >
        <Form-item
          label="功能名称"
          prop="name"
          :rules="{required: true, message: '必填', trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.name"></Input>
        </Form-item>
        <Form-item label="页面地址">
          <Input v-model="modalForm.url"></Input>
        </Form-item>
        <Form-item label="访问权限">
          <Input v-model="modalForm.perms"></Input>
        </Form-item>
        <Form-item
          label="排序编号"
          prop="orderNum"
          :rules="{required: true, message: '必填', trigger:'blur',type: 'number'}"
        >
          <InputNumber
            v-model="modalForm.orderNum"
            style="width:100%;"
          ></InputNumber>
        </Form-item>
        <Form-item
          label="父级菜单"
          v-show="menuType!='menu1'"
        >
          <Cascader
            v-if="menuType=='menu2'"
            v-model="modalForm.cascader"
            :data="cascaderDataFirst"
            change-on-select
          ></Cascader>
          <Cascader
            v-if="menuType=='menu3'"
            v-model="modalForm.cascader"
            :data="cascaderDataSecond"
            change-on-select
          ></Cascader>
        </Form-item>
        <Form-item label="图标选择">
          <Button
            type="default"
            :icon="modalForm.icon"
            @click="showIconModal"
          >{{modalForm.icon==''?'请选择':''}}</Button>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button
          type="default"
          @click="cancel"
        >关闭</Button>
        <Button
          type="primary"
          :loading="modalForm_loading"
          @click="saveForm('modalForm')"
        >保存</Button>
      </div>
    </Modal>
    <IconModal
      :modalShow="iconModalShow"
      @listenModalIcon="hideIconModel"
      @listenChildIcon="sendIcon"
    ></IconModal>
  </div>

</template>

<script>
import { getMenuCascader, saveMenu, updateMenu } from "@/api/system";
import IconModal from "./IconModal.vue";
export default {
  components: {
    IconModal
  },
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {
          menuId: "",
          name: "",
          orderNum: "",
          parentId: "",
          parentName: "",
          perms: "",
          type: 0,
          url: "",
          cascader: "",
          menuType: "menu1"
        };
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalFormTitle: {
      type: String,
      default: "添加菜单"
    }
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {
        type: 0
      },
      modalForm_loading: false,
      cascaderDataFirst: [],
      cascaderDataSecond: [],
      iconModalShow: false,
      menuType: "menu1"
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (curVal) {
        if (this.parentForm.type == 0) {
          this.menuType = "menu1";
        } else if (this.parentForm.type == 1) {
          this.menuType = "menu2";
        } else if (this.parentForm.type == 2) {
          this.menuType = "menu3";
        }

        let parentFormVal = JSON.parse(JSON.stringify(this.parentForm));
        if (parentFormVal.cascader) {
          parentFormVal.cascader = parentFormVal.cascader
            .split(",")
            .map(val => parseInt(val));
        } else {
          parentFormVal.cascader = [];
        }
        this.modalForm = parentFormVal;
        this.getParentMenuList();
      }
    }
  },
  mounted() {},
  methods: {
    async getParentMenuList() {
      let res = await getMenuCascader();
      if (res.code == 0) {
        this.cascaderDataSecond = res.data;
        this.cascaderDataFirst = res.data.map(item => {
          return {
            label: item.label,
            value: item.value
          };
        });
      }
    },
    cancel() {
      this.$emit("listenModalForm");
    },
    onTabClick(name) {
      this.menuType = name;
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          if (this.menuType == "menu2") {
            //二级菜单
            this.modalForm.parentId = this.modalForm.cascader[0];
            this.modalForm.type = 1;
          } else if (this.menuType == "menu3") {
            //三级菜单
            this.modalForm.parentId = this.modalForm.cascader[1];
            this.modalForm.type = 2;
          } else {
            this.modalForm.type = 0;
          }
          let cascader = this.modalForm.cascader.join(",");
          let params = JSON.parse(JSON.stringify(this.modalForm));
          params.cascader = cascader;
          try {
            let result;
            if (this.modalFormTitle == "添加菜单") {
              result = await saveMenu(params);
            } else {
              result = await updateMenu(params);
            }

            if (result.code == 0) {
              this.$Message.success("提交成功");
              this.$emit("listenModalForm");
              this.$emit("refreshTableList");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    showIconModal() {
      this.iconModalShow = true;
    },
    hideIconModel() {
      this.iconModalShow = false;
    },
    sendIcon(icon) {
      this.iconModalShow = false;
      this.modalForm.icon = icon;
    }
  }
};
</script>
